<!--
 * @Author: YSM
 * @Description: 级联选择器
 * @Date: 2023-09-06 17:40:54
 * @LastEditTime: 2023-10-12 17:36:11
 * @FilePath: \WOKER\Demo\my_web_knowledge\my_vue2_demo\src\views\Cascader\index.vue
-->
<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="130px">
    <el-row>
      <el-col :span="8">
        <el-form-item label="合同类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择合同类型" style="width: 100%" clearable filterable
            :disabled="type == 2" @change="getSecondParty">
            <el-option v-for="(dict, index) in contractTypeOptions" :label="dict.label" :value="dict.value"
              :key="index">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="是否联合体" prop="unionSecondParty">
          <el-radio-group v-model="form.unionSecondParty" :disabled="type == 2" @change="changeUnion">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-for="(item, index) in form.unionList" :key="index">
      <el-col :span="8">
        <el-form-item label="乙方单位" :prop="`unionList[${index}].secondParty`" :rules="{
          required: true,
          message: '乙方单位不能为空',
          trigger: 'blur',
        }">
          <el-cascader filterable clearable :disabled="type == 2" :options="secondPartyOptions" :props="props"
            v-model="item.secondParty" @change="getAssigneePerson(index, item.secondParty)">
          </el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="乙方单位责任人" :prop="`unionList[${index}].assigneePerson`" :rules="{
          required: true,
          message: '乙方单位参与人不能为空',
          trigger: 'blur',
        }">
          <el-select filterable :disabled="type == 2" v-model="item.assigneePerson" placeholder="请选择乙方单位参与人"
            style="width: 100%" clearable multiple>
            <el-option v-for="(dict, index) in item.assigneePersonOptions" :key="index" :label="dict.label"
              :value="dict.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" class="button-box" v-if="unionFlag && type != 2">
        <el-button v-if="index === 0" type="primary" icon="el-icon-plus" circle @click="addUnit(index)"></el-button>
        <el-button v-else type="danger" icon="el-icon-delete" circle @click="deleteUnit(index)"></el-button>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      // 通过type来判断当前项目是新增修改还是查看
      type: 1,
      props: { multiple: true, emitPath: false },
      // 判断是否有多个乙方单位与乙方单位负责人
      unionFlag: false,
      // 乙方单位下拉选项
      secondPartyOptions: [],
      // 乙方负责人下拉选项
      assigneePersonOptions: [],
      // 合同类型
      contractTypeOptions: [
        { value: 0, label: "初级" },
        { value: 1, label: "中级" },
        { value: 2, label: "高级" },
        { value: 3, label: "特殊" },
      ],
      form: {
        unionList: [
          {
            secondParty: "",
            assigneePerson: "",
          },
        ],
      },
      rules: {
        type: [
          { required: true, message: "合同段类型不能为空", trigger: "blur" },
        ],
        unionSecondParty: [
          { required: true, message: "是否是关联体不能为空", trigger: "blur" },
        ],
      },
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
    };
  },
  watch: {
    "form.type"(newValue, oldValue) {
      if (this.type !== 2 && this.form.deployStatus === "0") {
        if (newValue !== oldValue) {
          this.form.unionList = [
            {
              secondParty: "",
              assigneePerson: "",
            },
          ];
        }
      } else if (this.form.deployStatus !== "0" && oldValue !== undefined) {
        if (newValue !== oldValue) {
          this.form.unionList = [
            {
              secondParty: "",
              assigneePerson: "",
            },
          ];
        }
      }
    },
    "form.unionList": {
      handler(value) {
        value.forEach((item) => {
          this.$watch(
            () => item.secondParty,
            (newVal, oldVal) => {
              if (newVal !== oldVal) {
                item.assigneePerson = ""; // 清空对应的 assigneePerson 值
              }
            }
          );
        });
      },
      deep: true,
    },
  },
  methods: {
    // 添加乙方单位和乙方单位责任人
    changeUnion(row) {
      // 判断联合体的值是否等于1，如果等于1就关闭新增功能，如果不等于那就开启新增功能，同时在切换开关的时候将以前的数据给清除干净;
      if (row == "1") {
        this.unionFlag = true;
      } else {
        this.unionFlag = false;
        this.form.unionList.length = 1;
        // 此处用于清除之前选中的数据，如果不需要改功能可以注释掉
        this.form.unionList = [
          {
            secondParty: "",
            assigneePerson: "",
          },
        ];
      }
    },
    // 新增乙方单位&&乙方单位责任人
    addUnit(index) {
      const newItem = {
        secondParty: "",
        assigneePerson: "",
        assigneePersonOptions: [], // 创建新的assigneePersonOptions数组
      };
      this.form.unionList.splice(index + 1, 0, newItem);
    },
    // 删除乙方单位&&乙方单位责任人
    deleteUnit(index) {
      if (this.form.unionList.length > 1) {
        this.form.unionList.splice(index, 1);
      }
    },
    // 通过合同类型来获取乙方单位
    getSecondParty(row) {
      if (row) {
        getCompanyByCompanyType({ companyType: row }).then((res) => {
          // 获取返回数据，并处理数据格式（如果后端已将数据格式处理好了则无需这一步，具体数据结构参照elementUI级联选择器的文档）
          let arr = res.data.map((item) => {
            return {
              label: item.deptName,
              value: item.deptId,
            };
          });
          this.secondPartyOptions = arr;
        });
      }
    },
    // 通过乙方单位获取乙方单位参与人
    async getAssigneePerson(index, rows) {
      try {
        // 收集对应的乙方单位数据用于发送请求
        const row = this.form.unionList[index].secondParty;
        if (row) {
          const res = await selectUserByOwnerCompanyId(row);
          // 处理数据格式
          let arr = res.data.map((item) => {
            return {
              label: item.nickName,
              value: item.id,
            };
          });
          // 更新新生成el-row的assigneePersonOptions
          this.$set(this.form.unionList[index], "assigneePersonOptions", arr);
        }
      } catch (error) {
        // console.error(error);
        // 处理错误，例如显示错误提示信息
      }
    },
    // 查看详情
    structDetail() {
      structDetail(this.form.structId + "/" + this.form.structType).then(
        (res) => {
          let unionArr = res.data.bussMultiSelectRefList.map((item) => {
            if (item.part == "ASSIGNEE_DEPT") {
              return {
                secondParty: item.selectItemId,
                assigneePerson: item.bussMultiSelectRefList.map((item) => {
                  return item.selectItemId;
                }),
              };
            }
          });
          this.form = Object.assign({}, res.data, {
            secondParty: res.data.secondParty,
            unionList: unionArr.filter((value) => value !== undefined),
          });
          this.getSecondParty(this.form.type);
          this.form.unionList.map((item, index) => {
            this.getAssigneePerson(index);
          });
        }
      );
    },
    // 打开弹窗
    openDialog(row, type) {
      // 打开弹窗
      this.open = true;
      // 获取是否是详情
      this.type = type;
      // 组装部分展示数据
      this.form = Object.assign({}, row, {
        unionList:
          row.deployStatus != "0"
            ? this.form.unionList
            : [
              {
                secondParty: "",
                assigneePerson: "",
              },
            ],
      });
      if (type == 2 || row.deployStatus != "0") {
        this.structDetail();
        if (row.unionSecondParty == "1") {
          this.unionFlag = true;
        } else {
          this.unionFlag = false;
        }
      } else {
        this.unionFlag = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.button-box {
  .el-button {
    margin-left: 8px;
  }
}
</style>
